import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control
import myMixin from '@/mixin/index'

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

import UploadImages from './components/UpploadImage/index.vue'
Vue.component('UploadImages', UploadImages)
Vue.config.productionTip = false

Vue.mixin(myMixin)

// 上传图片组件全局配置
import ImageUpLoad from '@/components/ImageUpLoad/index'
Vue.component('ImageUpLoad', ImageUpLoad)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// 自定义指令
// 没有传图片的添加默认图片
// 来自人资中台项目
Vue.directive('imgErr', {
  // inserted 函数只有在标签第一次插入到html结构中的时候 才会触发 并且只会触发这一次
  inserted(el, binding) {
    el.addEventListener('error', function() {
      // console.log('图片报错了！', binding)
      el.src = binding.value
      // 为了使得我们封装的指令更加通用（不仅仅用在头像）
      // 标签的默认图片就不适合在这里写死了，因此默认图片
      // 可以在使用指令时传入。
    })
    // 如果后端返回的图片地址不存在(图片地址不存在的时候渲染图片的时候是不会报错的)，
    // 因此需要在监听错误事件的外面来设置图片默认值
    el.src = el.src || binding.value
  },
  // update 使用指令所在的组件数据发生变化触发，但是子组件数据发生变化时
  // update函数可能会触发也可能触发不了。
  // componentUpdated 当组件或者其子组件数据更新的时候就会触发该函数
  componentUpdated(el, binding) {
    el.addEventListener('error', function() {
      // console.log('图片报错了！', binding)
      el.src = binding.value
    })
    el.src = el.src || binding.value
  }
})
// 来自人资中台项目

import UploadImage from '@/views/agents/components/UploadImage.vue'
Vue.component('UploadImage', UploadImage)
